<template>
	<a-modal v-bind="modalConfig">
		<a-form :model="formData" ref="formRef" :rules="rules">
			<a-form-item label="姓名" name="name">
				<span>{{ formData.name }}</span>
			</a-form-item>
			<a-form-item label="电话" name="phone">
				<a-input v-model:value="formData.phone" placeholder="请输入11位手机号码" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, toRef, ref, createVNode, watch, nextTick} from 'vue'
	import {verifyPhone, updateRenterPhone} from '@/api/contract'
	import {message, Modal} from 'ant-design-vue'
	import {ExclamationCircleOutlined} from '@ant-design/icons-vue'
	import {validatePhone} from '@/utils/formValidation'

	const props = defineProps<{
		visible: boolean
		name: string
		phone: string
		contractId: string
	}>()
	const formRef = ref()
	const emits = defineEmits(['update:visible', 'success'])
	const rules = ref({
		name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
		phone: [
			{required: true, message: '请输入电话', trigger: 'blur'},
			{required: true, validator: validatePhone}
		]
	})

	const formData = reactive({
		name: props.name,
		phone: props.phone
	})
	const verifyPhoneLoading = ref(false)
	const modalConfig = reactive({
		width: 460,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		title: '编辑手机号信息',
		bodyStyle: {
			padding: '20px 15px'
		},
		okButtonProps: {
			loading: false
		},
		cancelButtonProps: {
			loading: false
		},
		onOk() {
			formRef.value
				?.validate()
				.then(() => {
					if (verifyPhoneLoading.value) return
					verifyPhoneLoading.value = true
					verifyPhone(formData.phone,props.contractId)
						.then(res => {
							if ('success' !== res.msg) {
								const modal = Modal.confirm({
									title: '是否继续执行租客信息修改',
									icon: createVNode(ExclamationCircleOutlined),
									content: `新手机号[${formData.phone}]在系统中已有业务关联，继续修改将会合并新老手机号所有的关联业务，请谨慎操作`,
									okButtonProps: {
										loading: false
									},
									cancelButtonProps: {
										loading: false
									},
									okText: '继续修改',
									onOk(close) {
										modal.update({
											okButtonProps: {
												loading: true
											},
											cancelButtonProps: {
												loading: true
											}
										})
										updateRenterPhone({
											pastPhone: props.phone,
											phone: formData.phone,
											userName: formData.name
										})
											.then(res => {
												message.success('修改成功')
												modal.destroy()
												emits('update:visible', false)
												emits('success')
											})
											.finally(() => {
												modal.update({
													okButtonProps: {
														loading: false
													},
													cancelButtonProps: {
														loading: false
													}
												})
											})
									},
									onCancel() {}
								})
							} else {
								nextTick(() => {
									modalConfig.okButtonProps.loading = true
									modalConfig.cancelButtonProps.loading = true
								})
								updateRenterPhone({
									pastPhone: props.phone,
									phone: formData.phone,
									userName: formData.name
								})
									.then(res => {
										message.success('修改成功')
										emits('update:visible', false)
										emits('success')
									})
									.finally(() => {
										modalConfig.okButtonProps.loading = false
										modalConfig.cancelButtonProps.loading = false
									})
							}
						})
						.finally(() => {
							verifyPhoneLoading.value = false
						})
				})
				.catch(error => {
					console.log('error', error)
				})
		},
		onCancel() {
			emits('update:visible', false)
		}
	})

	watch(
		() => [props.visible, props.phone],
		newVal => {
			if (newVal[0]) {
				formData.phone = newVal[1] as string
			}
		}
	)
</script>

<style lang="less" scoped></style>
